<template>
  <!--  :label-col="{ span: 8 }"-->
  <!--  :wrapper-col="{ span: 16 }"-->
  <a-form :model="formState" name="basic" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="账号" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
      <a-input-password v-model:value="formState.password" />
    </a-form-item>
    <!-- <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
    </a-form-item> -->
    <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
  import API from '@/api/index.js'
  import { message } from 'ant-design-vue'
  import { reactive } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const formState = reactive({
    username: '',
    password: '',
  })
  const loginFn = () => {
    API.login(formState).then((res) => {
      //   console.log(res.data)
      var d = new Date()
      // 设置过期时间为当前时间加上指定天数
      d.setTime(d.getTime() + 30 * 365 * 24 * 60 * 60 * 1000)
      // 将值编码以防止特殊字符问题
      var expires = 'expires=' + d.toUTCString()
      const cookieList = res.data.map((cookie) => `${cookie.key}=${cookie.value}`)
      //   console.log('cookieList >>>', cookieList)
      cookieList.forEach((item) => {
        document.cookie = item + ';' + expires
      })
      message.success('登录成功')
      router.push('/cloud/index')
    })
  }
  const onFinish = (values) => {
    console.log('Success:', values)
    loginFn()
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
</script>
